<template name='questions'>
	<view style="height: 100%">
		<u-sticky>
			<view class="navtop">
				<view class="status_bar">
					<!-- 这里是状态栏 -->
				</view>
				<view class="navtitle"> 问答 </view>
				<view class="search">
					<u-search placeholder="请输入关键字" bgColor='#F5F5F5' :showAction='false' v-model="pageInfo.search"
						@search="searchList"></u-search>
				</view>
			</view>
		</u-sticky>
		<view class="main">
			<view class="group_1">
				<image :src="url" class="image_1"></image>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%;" >
				<view class="group_2">
					<view class="section_1" v-for="(item, index) in askTypeList" :key="index"
						@click="particularsz(item)">
						<view>
							<image class="image_2" :src="item.urlType"></image>
						</view>
						<view class="text-1">{{item.title}}</view>
						<view style="width: 150rpx;height: 60rpx;display: flex;">
							<view style="margin: 10rpx 0 0 10rpx;">
								<image class="image_3" src="../../static/wendahuo.png"></image>
							</view>
							<view class="man">
								<text class="text-2">{{item.redNum}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="group_3">
				<view class="icon_1">
					<!-- <u-picker :show="show" :columns="columnsone" @confirm='confiemone' @cancel='cancelone' ></u-picker> -->
					<view class="icon_11" v-for="(item,i) in list_YhKWZRNv" :key="i" :class="pageInfo.end==i?'bold':''"
						@click="click(i)">{{item.name}}
						<!-- <u-icon name="arrow-down-fill" color="#000000" size="8" @click="show = true"></u-icon> -->
					</view>
				</view>
				<scroll-view class="scroll-view_H" :scroll-y="true" style="width: 100%; height: 1000rpx;" @scrolltolower="scrolltolower" >
						<view>
							<view class="icon_2" v-for="(item, index) in questionList" :key="index" v-if="item.expertsVisible == 0 || item.expertsVisible == indecs"
								@click="particulars(item,indecs)">
								<view class="block-1">
									<view class="block_11">{{item.tagShow}}</view>
									<view class="block_12">{{item.title}}</view>
								</view>
								<view class="block-2">{{item.msg}}</view>
								<view class="block-3">
									<text class="text-3">{{ getTime(item.createTime) }}</text>
									<image class="image_4" src="../../static/wendazixun.png"></image>
									<text class="text-4">{{item.askNum}}</text>
									<image class="image_5" src="../../static/wendachakan.png"></image>
									<text class="text-5">{{item.readNum}}</text>
									<text class="text-6">#{{item.typeTitle}}#</text>
								</view>
							</view>
						</view>
						<!-- <view class="icon_5"></view> -->
          <view class="" v-show="isOver">
            <u-loadmore :status="status" />
          </view>
				</scroll-view>
			</view>
		</view>

		<view class="fabu" @click="fabu">
			<image src="../../static/fabu.png" mode=""></image>
		</view>
	</view>
</template>
<script>
	import {
		getAskTypeList,
		getindexbanner,
		getQuestionList
	} from '../../api/index.js'
	import {
		dictApi
	} from "../../api/api";
	export default {
		name: 'questions',
		props: {
			cur: String,
			indecs: {
				type: Number,
				default: 0
			}
		},
		components: {},
		data() {
			return {
				list_YhKWZRNv: [{
					name: '最新'
				}, {
					name: '精选'
				}, {
					name: '我的问答'
				}],
				search: '',
				askTypeList: [],
				url: "",
				questionList: [],
				isOver: false,
				pageInfo: {
					pageNum: 1,
					pageSize: 10,
					end: '0',
					userType: '0',
					typeId: 0,
					search: ''
				},
			}
		},
		created() {
			//查询咨询类别
			getAskTypeList().then(res => {
				this.askTypeList = res.data
			})
			getindexbanner(3).then(res => {
				this.url = res.rows[0].url
			})
			this.pageInfo.userType = this.$store.state.userInfo.wxInfo.userType
			this.list()
		},
		mounted() {
			console.log(this.indecs);
		},

		methods: {
			scrolltolower(){
				console.log(123123121231)
				this.isOver = true;
				this.pageInfo.pageNum++;
				this.list();
			},
			searchList() {
				this.questionList = []
				this.pageInfo.pageNum = 1
				this.list()
			},
			particularsz(item) {
				let data = {
					typeId: item.id
				}
				uni.navigateTo({
					url: '/subPackages/pages/questions/questions?data=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			list() {
				getQuestionList(this.pageInfo).then(res => {
					this.questionList = this.questionList.concat(res.rows)
				})
			},
			click(i) {
				this.questionList = []
				this.pageInfo.pageNum = 1
				this.pageInfo.end = String(i)
				this.list()
			},
			particulars(item, indecs) {
				console.log('item', item)
				let data = {
					questionId: item.id,
					indecs: indecs,
					status:0
				}
				uni.navigateTo({
					url: '/pages/questions/particulars?data=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			particulars2() {
				console.log("sdsds");
				uni.navigateTo({
					url: '../../subPackages/pages/questions/questions'
				})
			},
			fabu() {
				uni.navigateTo({
					url: '/pages/questions/issue'
				})
			},
			getTime(time) {
				let oldDate = new Date(time)
				let nowDate = new Date()
				let subTime = (nowDate - oldDate) / 1000
				let hours = parseInt(subTime / 3600)
				if (hours < 24) {
					console.log('hours', hours)
					return hours + '小时前'
				}
				let day = parseInt(subTime / (60 * 60 * 24))
				if (day < 7) {
					console.log('day', day)
					return day + '天前'
				}
				console.log('tiem', time)
				return time
			}
		}
	}
</script>
<style scoped lang="scss">
	.navtop {
		background-image: linear-gradient(to right, #6CBEFF, #1989E1, #1989E1);
		overflow: hidden;

		.status_bar {
			height: var(--status-bar-height);
			width: 98%;
		}

		.navtitle {
			text-align: center;
			font-size: 32rpx;
			color: #000000;
			padding: 20rpx 0;
		}

		.search {
			width: 86vw;
			margin: 20rpx auto;
		}
	}

	.main {
		width: 95%;
		// border: 1rpx solid blue;
	}

	.group_1 {
		width: 95%;
		height: 286rpx;
		margin: 30rpx 0 0 4%;
	}

	.image_1 {
		width: 100%;
		height: 100%;
		background-image: 100% 100%;
	}

	.box {
		width: 98%;
		height: 200rpx;
	}

	.group_2 {
		width: 98%;
		height: 246rpx;
		margin: 20rpx 0 0 2%;
		display: flex;
	}

	.section_1 {
		width: 23%;
		height: 234rpx;
		background: url(../../static/juxing.png)100% 100%;
		margin: 10rpx 0 0 2%;
	}

	.image_2 {
		width: 120rpx;
		height: 120rpx;
		margin: 4rpx 0 0 16rpx;
	}

	.text-1 {
		width: 100rpx;
		height: 30rpx;
		margin: 2rpx 0 -16rpx 24rpx;
		font-size: 25rpx;
		font-family: SourceHanSansCN-Normal;
		color: rgba(51, 51, 51, 1);
		line-height: 30rpx;
	}

	.image_3 {
		width: 24rpx;
		height: 24rpx;
		margin: 0 0 0 8rpx;
	}

	.text-2 {
		width: 60rpx;
		height: 20rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		margin: 0 0 0 2rpx;
	}

	.group_3 {
		width: 100%;
		margin: 52rpx 0 0 1%;
	}

	.icon_1 {
		width: 94%;
		height: 40rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.image_4 {
		width: 10rpx;
		height: 10rpx;
		margin: 0 0 6rpx 4rpx;
	}

	.icon_2 {
		width: 96%;
		height: 240rpx;
		margin: 30rpx 0 0 2%;
		background-color: #F3F3F3;
		border-radius: 20rpx;
	}

	.block-1 {
		width: 90%;
		height: 40rpx;
		margin: 4rpx 0 0 4rpx;
		padding-top: 20rpx;
		display: flex;
	}

	.block-2 {
		width: 90%;
		height: 100rpx;
		margin: 24rpx 0 0 40rpx;
		color: #666666;
		font-size: 24rpx;
	}

	.block-3 {
		width: 90%;
		height: 40rpx;
		margin: 10rpx 0 0 36rpx;
		line-height: 34rpx;
	}

	.image_4 {
		width: 26rpx;
		height: 26rpx;
		margin: 0 0 0 40rpx;
	}

	.image_5 {
		width: 26rpx;
		height: 26rpx;
		margin: 0 0 0 40rpx;
	}

	.text-3 {
		font-size: 24rpx;
		color: #999999;
	}

	.text-4 {
		font-size: 24rpx;
		color: #999999;
		margin: 0 0 0 8rpx;
	}

	.text-5 {
		font-size: 24rpx;
		color: #999999;
		margin: 0 0 0 8rpx;
	}

	.text-6 {
    position: absolute;
    right: 0px;
		font-size: 24rpx;
		color: #3098EA;
	}

	.icon_3 {
		width: 96%;
		height: 240rpx;
		margin: 30rpx 0 0 2%;
		background-color: #F3F3F3;
		border-radius: 20rpx;
	}

	.icon_4 {
		width: 96%;
		height: 240rpx;
		margin: 30rpx 0 0 2%;
		background-color: #F3F3F3;
		border-radius: 20rpx;
	}

	.icon_5 {
		width: 90%;
		height: 240rpx;
	}

	.text-11 {
		width: 150rpx;
		height: 60rpx;
		display: flex;
	}

	.text-12 {
		margin: 10rpx 0 0 10rpx;
	}

	.text-13 {
		width: 80rpx;
		font-size: 25rpx;
		margin: 14rpx 0 0 0;
	}

	.icon_11 {
		font-size: 32rpx;
		color: #A5A4A4;
	}

	.bold {
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
	}

	.icon_12 {
		width: 15%;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #63667D;
		display: flex;
		margin: -36rpx 0rpx 0rpx 322rpx;
	}

	.icon_13 {
		width: 20%;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #63667D;
		display: flex;
		margin: -40rpx 0rpx 0rpx 540rpx;
	}

	.block_11 {
		width: 70rpx;
		height: 40rpx;
		background-color: #FF0000;
		color: #FFFFFF;
		line-height: 40rpx;
		font-size: 24rpx;
		text-align: center;
		border-radius: 2.5pt;
		margin: 0 0 0 28rpx;
	}

	.block_12 {
		width: 400rpx;
		height: 40rpx;
		color: #333333;
		line-height: 20rpx;
		font-size: 28rpx;
		margin: 0 0 0 28rpx;
	}

	.icon_6 {
		width: 40%;
		height: 300rpx;
		margin: 40rpx 0 0 100rpx;
		background-color: #007AFF;
	}

	.icon_7 {
		width: 40%;
		height: 300rpx;
		margin: 40rpx 0 0 100rpx;
		background-color: #18BC37;
	}

	.fabu {
		position: fixed;
		bottom: 200rpx;
		right: 30rpx;

		image {
			width: 120rpx;
			height: 120rpx;
		}
	}

	.man {
		width: 80rpx;
		font-size: 25rpx;
		margin: 14rpx 0 0 0;
		text-align: center;
	}
</style>
